<template>
  <div class="home">
    <div class="tip" v-if="showtip" :class="{ abc: !rec }">
      <van-swipe
        @change="change"
        class="my-swipe"
        :loop="false"
        indicator-color="white"
      >
        <van-swipe-item>
          <img class="img"
            src="../assets/icon/a.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img class="img"
            src="../assets/icon/a.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img class="img"
            src="../assets/icon/a.jpg"
            alt=""
          />
        </van-swipe-item>
        <span class="tg" @click="tg1"
          >{{ time }}<span v-if="time">s</span>跳过</span
        >
      </van-swipe>
    </div>

    <router-view />

    <!-- 底部导航 -->
    <div>
      <van-tabbar v-model="active" active-color="#a8896d" route>
        <van-tabbar-item
          :to="item.to"
          v-for="(item, index) in tabbarList"
          :key="index"
        >
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.icon.active : item.icon.inactive" />
          </template>
        </van-tabbar-item>
        <div class="logo" @click="showOptions">
          <img src="../assets/icon/logo.png" alt="" />
        </div>
      </van-tabbar>
    </div>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onselect"
    />
    <!-- 海报 -->
    <van-popup v-model="show">
      <a href="" download="../assets/icon/5.jpg">
        <img class="auto" src="../assets/icon/5.jpg" alt="" />
      </a>
    </van-popup>

    <!-- 二维码 -->
    <van-popup v-model="show1">
      <vue-qr :logoSrc="imageUrl" :text="href" :size="200"></vue-qr>
    </van-popup>
  </div>
</template>

<script>
import vueQr from "../../node_modules/vue-qr";
export default {
  name: "Main",
  components: {
    vueQr,
  },
  data() {
    return {
    showtip:true,
      rec: true,
      time: 5,
      href: "",
      imageUrl: require("../assets/icon/5.jpg"),
      show: false,
      show1: false,
      showShare: false,
      options: [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      active: 0,
      //底部导航图标列表
      tabbarList: [
        {
          title: "首页",
          icon: {
            active: require("../assets/icon/1.png"),
            inactive: require("../assets/icon/2.png"),
          },
          to: { name: "Home" },
        },
        {
          title: "菜单",
          icon: {
            active: require("../assets/icon/3.png"),
            inactive: require("../assets/icon/4.png"),
          },
          to: { name: "Menu" },
        },
        {
          title: "",
          icon: {
            active: require("../assets/icon/1.png"),
            inactive: require("../assets/icon/2.png"),
          },
        },
        {
          title: "购物袋",
          icon: {
            active: require("../assets/icon/5.png"),
            inactive: require("../assets/icon/6.png"),
          },
          to: { name: "Order" },
        },
        {
          title: "我的",
          icon: {
            active: require("../assets/icon/7.png"),
            inactive: require("../assets/icon/8.png"),
          },
          to: { name: "Mine" },
        },
      ],
    };
  },
  created() {
    let demoStr = this.$cookies.get("demo")
    if(demoStr){
        this.showtip = ! this.showtip
    }
  },
  methods: {
    //点击跳过
    tg1() {
      this.$cookies.set("demo", "a", "1d");
      this.rec = !this.rec;
    },
    //引导页
    change(e) {
      if (e == 2) {
        let timer = null;
        timer = setInterval(() => {
          if (this.time == 1 || this.time == "") {
            this.time = "";
            clearInterval(timer);
            return;
          }
          this.time--;
        }, 1000);
      }
    },
    //复制方法
    copy(text) {
      this.$copyText(text).then(() => {
        this.$toast("复制成功");
      });
    },
    //点击分享模块触发
    onselect(e, index) {
      console.log(index);
      //点击复制链接
      if (index == 0) {
        this.copy(window.location.href);
      }
      //点击分享海报
      if (index == 1) {
        this.show = !this.show;
      }
      //点击二维码
      if (index == 2) {
        this.show1 = !this.show1;
        setTimeout(() => {
          this.href = window.location.href;
        }, 100);
      }
    },
    //控制分享面板显示隐藏
    showOptions() {
      this.showShare = !this.showShare;
    },
  },
};
</script>

<style lang="less" scoped>
.tip {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  transition: left 0.5s;
  .img {
    width: 100%;
    height: 100vh;
  }
  .tg {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    z-index: 3;
  }
}
.abc {
  // left: -500px;
  display: none;
}
.home {
  min-height: 100vh;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
/deep/.van-popup--center {
  overflow: hidden !important;
}
.auto {
  width: 100%;
  display: block;
}
/deep/.van-hairline--top-bottom {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.logo {
  position: fixed;
  left: 50px;
  margin-left: 95px;
  bottom: 10px;
  z-index: 1;
}
/deep/.van-tabbar-item:nth-child(3) {
  opacity: 0;
}
</style>